<template>
    <n-scrollbar x-scrollable style="max-height: 100vh">
        <CommonPage show-footer>

            <div style="display: flex">
                <n-form-item label="" path="input" style="margin-top: -30px">
                    <div >
                        <div style="display: flex; align-items: center; ">
                            <span style="width: 80px;">出库仓库：</span>
                            <n-select style="margin-left: 0px" placeholder="选择仓库"></n-select>
                            <span style="width: 80px; margin-left: 25px">出库类型：</span>
                            <n-select style="margin-left: 0px" placeholder="选择类型"
                                      :options="options"></n-select>
                            <span style="width: 50px; margin-left: 25px">备注：</span>
                            <n-input placeholder="" style="margin-left: 0px;width: 450px"></n-input>

                        </div>

                        <br>
                        <div>
                            <n-button type="primary">添加产品</n-button>
                            <n-button type="primary" style="margin-left: 10px">导入产品</n-button>
                        </div>
                    </div>

                </n-form-item>
            </div>
            <n-data-table
                    remote
                    :single-line="false"
                    ref="table"
                    :columns="columns"
                    :data="customerOrderList"
                    :loading="loading"
                    :pagination="paginationReactive"
                    :row-key="rowKey"
                    :header-cell-style="{ textAlign: 'center' }"
                    :cell-style="{ textAlign: 'center' }"
                    @update:page="onChangePage"
                    @update:page-size="onUpdatePageSize"
            />
            <n-button type="primary" style="margin-left: 42%;" @click="sub">提交</n-button>
            <n-button type="primary" style="margin-left: 30px;" @click="sub">取消</n-button>
        </CommonPage>
    </n-scrollbar>
</template>

<script setup>
    import {  ref, reactive, onMounted } from 'vue'
    import api from '@/api/admin';
    import { useUserStore } from '@/store';
    import { useRouter } from 'vue-router';
    import {formatDateTime, formatDate} from "@/utils";
    import CourseActions from "@/views/admin/course/components/course-actions.vue";
    import ProductActions from "@/views/admin/product/components/product-actions.vue";

    const userStore = useUserStore()
    const router = useRouter()
    const loading =  ref(true)
    const logBrand = ref([])
    const range = ref(null)

    const value = ref("全部")
    const checkedRowKeysRef = ref([]);
    const handleCheck =(rowKeys)=>{
        checkedRowKeysRef.value = rowKeys;
    }
    const options=ref([
        {label:'正常出库',
            value:'正常出库'},
        {
            label: '换货出库',
            value: '换货出库'
        },{
            label: '其他出库',
            value: '其他出库'
        }

    ])

    const columns = [

        {
            key: 'colId',
            title: '序号',
            width: 60,
        },
        {
            key: 'name',
            title: '产品名称',
            width: 100,
            render(row){
                return formatDateTime(row["optime"])
            }
        },
        {
            key: 'picture',
            title: '产品图片',
            width: 100,
        },
        {
            key: 'status',
            title: '产品状态',
            width: 100,
            align:'left',
            render(row) {
                return h(
                    'div',
                    {
                        class: 'two-line-description',
                    },
                    row.abstractContent.replace(/<[^>]+>/g, '')
                )
            },
        },
    ]
    let total = 0
    const paginationReactive = reactive({
        page: 1,
        pageSize: 50,
        showSizePicker: true,
        pageSizes: [50, 100, 150],
        itemCount:0,
        prefix: () => {
            return '查询出 ' + total + '条记录';
        },
        onChange: (page) => {
            paginationReactive.page = page;
            queryByPage()
        },
        onUpdatePageSize: (pageSize) => {
            paginationReactive.pageSize = pageSize;
            paginationReactive.page = 1;
            queryByPage()
        }
    });
    const productInfoValue = ref({
        name:'',
        id:'',
        pageNum:paginationReactive.page,
        pageSize:paginationReactive.pageSize

    });

    const searchByCondition = async ()=>{
        const type = value.value
        let timeFrom = ""
        let timeTo = ""
        if(range.value !== null) {
            timeFrom = formatDate(range.value[0])
            timeTo = formatDate(range.value[1])
        }
        loading.value = true
        try {
            paginationReactive.page = 1;
            const res = await api.getLogByCondition({
                type,
                timeFrom,
                timeTo,
                pageNum:paginationReactive.page,
                pageSize:paginationReactive.pageSize,
            })
            if(res.code === 0) {
                total = res.data.total
                paginationReactive.itemCount = total
                logList.value = res.data.list.map((item,i)=>{
                    return {...item,
                        colId: i+1+(paginationReactive.page-1)*paginationReactive.pageSize
                    }
                })
                $message.success("获取产品成功！")
            }
            else {
                $message.error(res.message)
            }
        } catch (err) {
            $message.error("查询产品失败！")
        }finally{
            loading.value = false
        }
    }
    const onDeleteLog = async (log)=>{
        $dialog.confirm({
            title: '警告',
            content: '您确定删除当前产品？',
            positiveText: '确定',
            negativeText: '取消',
            onPositiveClick: async () => {
                const {id} = log
                loading.value = true
                try {
                    const res = await api.deleteById({id})
                    if(res.code === 0) {
                        $message.success("删除产品成功！")
                        // await queryByPage()
                        await searchByCondition()
                    }
                    else {
                        $message.error(res.message)
                    }
                } catch (err) {
                    $message.error("删除产品失败！")
                }finally{
                    loading.value = false
                }
            }
        })
    }
    const onDetailLog = async (log)=>{
        const {id} = log
        await router.push({name: 'AdminLogDetail', params: {logId: id}});
    }
    const queryByPage = async ()=>{
        loading.value = true
        try {
            const res = await api.getAllLog(
                {
                    pageNum:paginationReactive.page,
                    pageSize:paginationReactive.pageSize,
                })
            if(res.code === 0) {
                total = res.data.total
                paginationReactive.itemCount = total
                logList.value = res.data.list.map((item,i)=>{
                    return {...item,
                        colId: i+1
                    }
                })
                $message.success("获取产品成功！")
            }
            else {
                $message.error(res.message)
            }
        } catch (err) {
            $message.error("获取产品失败！")
        }finally{
            loading.value = false
        }
    }
    const rowKey = (rowData) => {
        return rowData.id
    }
    onMounted(()=>{
        queryByPage()
    })
</script>
<style scoped>
    :deep(.n-data-table-th__title),
    :deep(.n-data-table-td) {
        text-align: center;

    }
    :deep(.n-select) {
        width: 140px !important;
    }

    :deep(.two-line-description) {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; /* 控制显示的行数 */
        overflow: hidden;
    }

</style>
